<!-- 任务执行情况 -->
<template>
  <el-dialog title="菜品添加编辑" :visible.sync="dialogVisible" @close="$emit('update:visible',false)"
             :close-on-click-modal="false" :before-close="beforeclose">
    <div class="cateBody">
      <el-form label-width="100px">
        <el-form-item label="菜品展示图">
          <imgUploadModle @getChildValue="getChildValue" imgNumber="1" page="foodPic"
                          :picSrc="foodEdit.pic"></imgUploadModle>
        </el-form-item>
        <el-form-item label="菜品名称">
          <el-input v-model="foodEdit.name" auto-complete="off" placeholder="填写菜品类目"></el-input>
        </el-form-item>
        <el-form-item label="菜品类目">
          <el-select placeholder="菜品类目" v-model="foodEdit.cat_id">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in cateList"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible',false)" size="small">取 消</el-button>
      <el-button type="primary" @click="foodCheck()" size="small">确 定</el-button>
    </div>
    <AuxiliaryModule @getInformation="getInformation" :typeData="typeData"></AuxiliaryModule>
  </el-dialog>
</template>
<script>

export default {
  components: {},
  name: 'taskListDialog',
  props: ['visible', 'foodOption', 'dialogType'],
  data() {
    return {
      typeData: 'food_add',
      dialogVisible: this.visible,
      cateList: [],
      foodId: null,
      foodEdit: {
        name: '',
        pic: '',
        cat_id: null
      }
    }
  },
  created() {
    console.log('imghttp:', this.dialogType)
    if (this.dialogType === 'edit') {
      console.log('编辑页面')
    }
    this.initFn()
  },
  methods: {
    initFn() {
      // 获取分类列表
      this.$post(this.api.cate_list, {
        p: 1
      }).then((response) => {
        if (response.code === 0) {
          this.cateList = response.list.data
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    foodCheck() {
      console.log(this.foodEdit)
      if (!this.foodEdit.pic) {
        this.$message.error('请上传菜品展示图')
        return
      } else if (!this.foodEdit.name) {
        this.$message.error('请填写菜品名称')
        return
      } else if (typeof this.foodEdit.cat_id !== 'number') {
        this.$message.error('请填写选择菜品类目')
        return
      }
      let url_ = this.api.food_add
      if (this.dialogType === 'edit') {
        url_ = this.api.food_edit
      }
      this.$post(url_, this.foodEdit).then((response) => {
        if (response.code === 0) {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.$emit('initPage')
          this.dialogVisible = false
          this.foodEdit.name = ''
          this.foodEdit.pic = ''
          this.foodEdit.cat_id = ''
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getImgSrc(option) {
      this.foodEdit.pic = option
    },
    beforeclose() {
      // this.dialogType = ''
      this.dialogVisible = false
    },
    getChildValue(option) {
      this.foodEdit.pic = option
    },
    // 同步数据
    getInformation(option) {
      console.log('收到的数据内容：', option)
      for (let item of option) {
        if (item.type === 'img' && item.number === 1) {
          this.foodEdit.pic = item.value[0].url
        }
      }
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.dialogType === 'edit' && this.visible) {
        this.foodEdit.id = this.foodOption.id
        this.foodEdit.name = this.foodOption.name
        this.foodEdit.pic = this.foodOption.pic
        this.foodEdit.cat_id = this.foodOption.cat_id
      }
      if (!this.visible) {
        this.foodEdit.id = ''
        this.foodEdit.name = ''
        this.foodEdit.pic = ''
      }
    }
  },
  mounted() {
  }
}
</script>
<style>
.cateBody {
  padding: 40px 0;
}
</style>
